/**
 * Motes 前端 Ant Design Vue 样式覆写文件
 *
 * 主要功能：
 * - 自定义 Ant Design Vue 组件样式
 * - 定义应用主题色彩体系
 * - 优化思维导图和大纲笔记的交互体验
 * - 提供统一的视觉设计规范
 *
 * 技术特点：
 * - 使用 Less 预处理器
 * - 基于 Ant Design Vue 设计系统
 * - 支持主题色彩变量
 * - 响应式设计支持
 *
 * @file antd-overrides.less
 * @description Ant Design Vue 样式覆写和主题配置
 */

/* ==================== Less 变量定义 ==================== */
/**
 * 主色调定义
 *
 * 定义应用的主要色彩，包括主色、浅色变体等，
 * 用于按钮、链接、选中状态等主要交互元素。
 */
// 主色调
@primary-color: #1890ff;
@primary-color-light: #40a9ff;
@primary-color-lighter: #e6f7ff;
@primary-color-lightest: #f0f8ff;

/**
 * 中性色定义
 *
 * 定义文本和背景的中性色彩，
 * 用于不同层级的文本显示和背景填充。
 */
// 中性色
@text-color: rgba(0, 0, 0, 0.88);
@text-color-secondary: rgba(0, 0, 0, 0.66);
@text-color-tertiary: rgba(0, 0, 0, 0.45);
@text-color-quaternary: rgba(0, 0, 0, 0.25);

/**
 * 背景色定义
 *
 * 定义不同层级的背景色彩，
 * 用于页面、卡片、面板等容器元素。
 */
// 背景色
@bg-color: #ffffff;
@bg-color-light: #fafafa;
@bg-color-lighter: #f5f5f5;
@bg-color-lightest: #f0f0f0;

/**
 * 边框色定义
 *
 * 定义边框和分割线的色彩，
 * 用于表单、卡片、面板等元素的边界。
 */
// 边框色
@border-color: #d9d9d9;
@border-color-light: #e0e0e0;
@border-color-lighter: #e8e8e8;
@border-color-lightest: rgba(0, 0, 0, 0.06);

/**
 * 阴影定义
 *
 * 定义不同层级的阴影效果，
 * 用于按钮、卡片、模态框等元素的立体感。
 */
// 阴影
@shadow-light: 0 1px 3px rgba(0, 0, 0, 0.06);
@shadow-base: 0 2px 8px rgba(0, 0, 0, 0.1);
@shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.08);
@shadow-heavy: 0 12px 32px rgba(0, 0, 0, 0.15);

/**
 * 状态色定义
 *
 * 定义不同状态的颜色标识，
 * 用于成功、警告、错误、信息等状态提示。
 */
// 状态色
@success-color: #52c41a;
@warning-color: #faad14;
@error-color: #ff4d4f;
@info-color: #1890ff;

/**
 * 特殊色定义
 *
 * 定义特殊用途的颜色，
 * 用于高亮、代码背景等特殊场景。
 */
// 特殊色
@highlight-color: #f50;
@code-bg: #0b1020;
@code-color: #d9f7be;

/* ==================== Ant Design Vue 全局样式覆写（通用规则） ==================== */

/**
 * 按钮样式优化
 *
 * 为圆形按钮添加动效和阴影，
 * 提升按钮的交互体验和视觉层次。
 */
/* 按钮：圆形按钮的动效与阴影 */
.ant-btn-circle {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: @shadow-base;

  &:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  &:active {
    transform: translateY(0) scale(0.98);
  }

  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
}

/**
 * 大尺寸按钮图标优化
 *
 * 调整大尺寸按钮中图标的大小，
 * 保持图标与按钮尺寸的协调性。
 */
/* 大尺寸按钮图标 */
.ant-btn-lg {
  .anticon {
    font-size: 18px;
  }
}

/**
 * 工具提示样式统一
 *
 * 统一工具提示的字号，
 * 确保提示信息的可读性。
 */
/* 工具提示字号统一 */
.ant-tooltip {
  font-size: 13px;
}

/**
 * 分割线样式优化
 *
 * 调整带文字分割线的外边距，
 * 改善页面布局的视觉平衡。
 */
/* 分割线（带文字）外边距 */
.ant-divider-with-text {
  margin: 20px 0 !important;
}

/**
 * 表单项标签样式优化
 *
 * 调整表单项标签的字号，
 * 提升表单的可读性和用户体验。
 */
/* 表单项标签字号 */
.ant-form-item-label > label {
  font-size: 16px;
}

/**
 * 输入框样式优化
 *
 * 为输入框和文本域添加交互效果，
 * 包括焦点状态、悬停效果和圆角设计。
 */
/* 输入与文本域的交互与圆角 */
.ant-input,
.ant-input-textarea {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px;

  &:focus {
    box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.15);
    border-color: @primary-color;
  }

  &:hover {
    border-color: @primary-color-light;
  }
}

/**
 * 输入框前缀图标间距优化
 *
 * 调整输入框前缀图标的右边距，
 * 改善图标与文本的视觉间距。
 */
/* 输入框前缀图标间距 */
.ant-input-prefix {
  margin-right: 12px;
}

/**
 * 文本域样式优化
 *
 * 优化文本域的内部样式和行为，
 * 包括禁用调整大小、移除边框等。
 */
/* 文本域内部的原生行为优化 */
.ant-input-textarea {
  .ant-input {
    resize: none;
    border: none;
    box-shadow: none;

    &:focus {
      box-shadow: none;
    }
  }

  /* 统一的文字显示体验（页面可定制字号） */
  .ant-input {
    line-height: 1.6;
    transition: all 0.2s ease;
  }
}

/**
 * 分段选择器样式优化
 *
 * 调整分段选择器项的文本对齐方式，
 * 确保选项内容的居中对齐。
 */
/* 分段选择器项居中 */
.ant-segmented-item {
  text-align: center;
}

/* ==================== 树形组件通用样式 ==================== */
/**
 * 树形组件样式优化
 *
 * 为思维导图和大纲笔记中的树形组件提供统一的样式，
 * 包括节点交互、拖拽效果、加载状态等。
 */

/**
 * 树节点内容包装器样式
 *
 * 优化树节点的交互体验，
 * 包括鼠标悬停效果和内容对齐。
 */
/* 树节点内容包装器 */
.ant-tree-node-content-wrapper {
  cursor: pointer !important;
  padding-left: 0 !important;

  &:hover {
    background-color: @bg-color-lighter !important;
  }
}

/**
 * 拖拽指示器样式
 *
 * 自定义拖拽时的指示器样式，
 * 使用主色调突出显示拖拽位置。
 */
/* 拖拽指示器 */
.ant-tree-drop-indicator {
  background-color: @primary-color !important;
  height: 2px !important;
}

/**
 * 隐藏无操作的开关
 *
 * 隐藏叶子节点的展开/收起开关，
 * 简化树形结构的视觉表现。
 */
/* 隐藏无操作的开关 */
.ant-tree-switcher-noop {
  display: none !important;
}

/**
 * 显示展开/收起开关
 *
 * 确保有子节点的树节点显示展开/收起开关，
 * 提供清晰的交互提示。
 */
/* 显示展开/收起开关 */
.ant-tree-switcher_open,
.ant-tree-switcher_close {
  display: inline-block !important;
}

/**
 * 拖拽时的节点样式
 *
 * 为正在拖拽的节点添加透明度效果，
 * 提供清晰的拖拽状态反馈。
 */
/* 拖拽时的节点样式 */
.ant-tree-treenode-dragging {
  opacity: 0.5;
}

/**
 * 拖拽目标样式
 *
 * 为拖拽目标位置添加高亮背景，
 * 明确显示可放置的位置。
 */
/* 拖拽目标样式 */
.ant-tree-drop-target {
  background-color: @primary-color-lighter !important;
}

/**
 * 加载中的节点样式
 *
 * 为正在加载的节点添加背景色，
 * 提供加载状态的视觉反馈。
 */
/* 加载中的节点样式 */
.ant-tree-treenode-loading {
  .ant-tree-node-content-wrapper {
    background-color: @primary-color-lightest !important;
  }
}

/* ==================== 侧边栏触发器样式 ==================== */
/**
 * 侧边栏触发器样式优化
 *
 * 优化侧边栏折叠/展开按钮的样式，
 * 提供更好的交互体验。
 */

/**
 * 侧边栏触发器基础样式
 *
 * 设置触发器的透明背景，
 * 与侧边栏设计保持一致。
 */
.ant-layout-sider-trigger {
  background: transparent !important;

  &:hover {
    background: rgba(0, 0, 0, 0.04) !important;
  }
}
